<template>
  <div>
    <h1 ref="h1">{{ counter }}</h1>
    <button @click="counter++">+1</button>

    <Dialog v-if="isShow"/>
    <button @click="isShow = !isShow">切换</button>

    <hr>
    <Banner />
  </div>
</template>

<script>
import Dialog from './components/Dialog.vue'
import Banner from './components/Banner.vue'
export default {
  data() {
    return {
      counter: 1,
      isShow: true
    };
  },
  components: {
    Dialog,
    Banner
  },
  // 1. 初始化阶段
  // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
  // beforeCreate() {
  //   console.group("beforeCreate 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1);
  //   console.groupEnd("beforeCreate 生命周期执行结束了");
  // },
  // // 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，
  // // 意味着以下内容已被配置完毕：
  // // 数据侦听、计算属性、方法、事件/侦听器的回调函数
  // // -- 可以在这里发起ajax请求 修改数据
  // created() {
  //   console.group("created 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1);
  //   console.groupEnd("created 生命周期执行结束了");
  // },

  // // 2. 挂载阶段
  // // 在挂载开始之前被调用：相关的 render 函数首次被调用
  // beforeMount() {
  //   console.group("beforeMount 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1);
  //   console.groupEnd("beforeMount 生命周期执行结束了");
  // },
  // // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
  // // 如果根实例挂载到了一个文档内的元素上，
  // // 当 mounted 被调用时 vm.$el 也在文档内。
  // // 一般在这里进行dom操作  也可以在这里发起请求 ajax
  // mounted() {
  //   console.group("mounted 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1);
  //   console.log(this.$el);
  //   console.groupEnd("mounted 生命周期执行结束了");
  // },
  // // 3. 更新阶段
  // // 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它
  // beforeUpdate() {
  //   console.group("beforeUpdate 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1.innerHTML);
  //   console.groupEnd("beforeUpdate 生命周期执行结束了");
  // },
  // // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  // // 当这个钩子被调用时，组件 DOM 已经更新
  // updated() {
  //   console.group("updated 生命周期执行了");
  //   console.log(this.counter);
  //   console.log(this.$refs.h1.innerHTML);
  //   console.groupEnd("updated 生命周期执行结束了");
  // }
};
</script>

<style>
</style>